<template>
    <div id="loginform">
      <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="账号">
              <el-input v-model="form.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
              <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onLogin">登录</el-button>
          </el-form-item>
      </el-form>
    </div>
</template>

<style lang="less">
#loginform {
  position: absolute;
  height: 200px;
  width: 500px;
  left: 50%;
  top: 50%;
  padding-top: 80px;
  padding-right: 80px;
  background: #f3f3f3;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}
</style>

<script>
import { login } from '@/api/login'
// import request from '@/utils/request'
import { setInfo } from '@/utils/storage'

export default {
  name: 'LoginView',
  data () {
    return {
      form: {
        account: '',
        password: ''
      }
    }
  },
  methods: {
    async onLogin () {
      const res = await login(this.form.account, this.form.password)
      this.$message.success({
        message: '登录成功'
      })
      console.log(res)
      setInfo(res.data)
      this.$router.push('/home')
    }
  }
}
</script>
